<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

  <div id="id1">
    <template>
  	<el-form ref="form" :model="form"  label-width="80px">
  	<el-form-item label="姓名">
    <el-input v-model="form.name" placeholder="请输入您的真实姓名"></el-input>
  </el-form-item>
  	<el-form-item label="性别">
  <el-radio v-model="radio" label="1">男</el-radio>
  <el-radio v-model="radio" label="2">女</el-radio>
  </el-form-item>
  
  <el-form-item label="车辆图片">
  <el-upload
          name="img1"
          :before-upload="beforeUpload"
  action="http://localhost:9000/cms/rating/savePic2"
  :auto-upload="false"
  ref="upload"
  list-type="picture-card"
      :on-change="onChange"
          :file-list="fileList"

  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

</el-form-item>

      <el-form-item label="身份图片">
        <el-upload
                name="img2"
                :before-upload="beforeUpload"
                :action="UploadUrl()"
                :auto-upload="false"
                ref="upload2"
                list-type="picture-card"
                :file-list="fileList2"
                :on-change="onChange"

                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

      </el-form-item>


      <el-form-item>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      </el-form-item>
  
  
  </el-form>
</template>
</div>


</body>

<script>
  new Vue ({
  	el: '#id1',
    data () {
      return {
      	form:{
      		name:'袁逍'
      	},
          fileList:[{name: 'pic1.jpg',url:'http://localhost:9000/cms/article/pic1.jpg'}],
        radio: '1',
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
     methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
        
      },
         onChange(file, fileList){
            this.fileList=fileList;
            console.log(this.fileList)
         },
      handlePictureCardPreview(file) {
      	console.log("handlePictureCardPreview")
        this.dialogImageUrl = file.url;
        console.log(file.url);
        this.dialogVisible = true;
      },
         beforeUpload(file){
             console.log(this.form.name)
             var fd = new FormData();
             fd.append('fileList',this.fileList);//传文件
             fd.append('name',this.form.name)
             console.log(fd)
             var config = {	    headers:{'Content-Type':'multipart/form-data'}	};
             //fd.append('srid',this.aqForm.srid);//传其他参数
             /*axios.post('/cms/rating/savePic',fd).then(function(res){
                 alert('成功');
             })*/

             return true;
         },
         submitUpload() {

             this.$refs.upload.submit();
             this.$refs.upload2.submit();
             var fd = new FormData();
             fd.append('fileList',this.fileList);//传文件
             fd.append('name',this.form.name)
             axios.post('/cms/rating/savePic',fd).then(function(res){
                 alert('成功');

         })
      },
  UploadUrl:function(){
      return "http://localhost:9000/cms/rating/savePic";
  }




  }
  })

</script>
 
  
</html>